<template>
  <div class="dashboard-container">
    <span>请点击下方卡片前往对应页面</span> <br />  <br /> <br />
    <el-carousel :interval="5000" arrow="always"  type="card">
      <el-carousel-item v-for="item in pages" :key="item.index">
        <a :href="item.link" style="display: block; text-align: center">{{ item.name }} <i :class="item.img" /></a>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  name: 'Dashboard',
  data() {
    return {
      pages: [{'name': '测试用例管理', 'link': '/case/list/1', 'img': 'el-icon-edit'},
        {'name': '测试数据管理', 'link': '/data', 'img': 'el-icon-s-data'},
        {'name': '测试脚本管理', 'link': '/scripts', 'img': 'el-icon-s-tools'},
        {'name': '测试监控管理', 'link': '/monitor', 'img': 'el-icon-bell'}]
    }
  },
  computed: {
    ...mapGetters([
      'token',
    ])
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
.el-carousel__item a {
  color: #475669;
  font-size: 18px;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #94bee8;
}

.el-carousel__item:nth-child(2n+1) {
  background-color: #94bee8;
}
</style>
